var allChart = ['IndustryPopulation','skillMastery','PersonChange','playbackVolume',
'mapchart','ageDistribution','regionalDistribution','dailyExpressCost','ReceivingPerformance',
'NewOrdersToday','CommodityInventoryWarning','DailyOrderEachProvince','MonthlyCostEachExpress']

//全局变量，用于存储选中要展示的图表
var checkedlist = [];

(function(){
    //为所有的复选框input添加click函数，这里不需要传递event，这种触发方式和写在标签中onclick="getCheckedList(event)"效果一样
    $(".dropdown-menu li input").on("click",getCheckedList)
})();

//每选择一个图表，就将其加入选择（checkedlist）的队列
function getCheckedList(){
    //点击选择框input触发该函数

    //dom是input标签
    var dom = this
    let state = $(dom).prop("checked")
    if(state){
        checkedlist.push($(dom).val())
        $(dom).parent().addClass("bg-primary")
    }else{
        let index = checkedlist.indexOf($(dom).val())
        checkedlist.splice(index,1)
        $(dom).parent().removeClass("bg-primary")
    }
    console.log(checkedlist)
}




//首页六个图表显示选择的图表
function showSelectedChart(){
    console.log("开始交换")
    // console.log("你选择要展示的图表如下："+checkedlist)
    var sixpanelsParent = $(".sixpanelWarp")
    var sixpanelsParentChild = sixpanelsParent.children()
    // console.log(sixpanelsParentChild)
    
    sixpanelsParentChild.each(function(i){
        //target是放置图表的一个面板
        var target = $("#"+checkedlist[i]).parent()[0]
        //this.children[i]也是放置图表的一个面板
        if(this.children[0].id!=target.id){
            console.log(this.children[0].id+"和"+target.id+"进行交换")
            //让两个面板交换位置
            exchange(this.children[0],target)
        }
    })
    
}


function exchange(draged,target){
    //this是指6个面板中图表中的一个，target是需要展示的图表
    var temp = document.createElement("div")

    var dragedParent = draged.parentNode
    var targetParent = target.parentNode

    dragedParent.replaceChild(temp,draged)
    targetParent.replaceChild(draged,target)
    dragedParent.replaceChild(target,temp)
    
}

function getRootPath() {
    //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp
    var curWwwPath = window.document.location.href;
    //获取主机地址之后的目录，如： uimcardprj/share/meun.jsp
    var pathName = window.document.location.pathname;
    var pos = curWwwPath.indexOf(pathName);
    console.log("pathName = "+pathName+"\n"+"pos = "+pos)
    //获取主机地址，如： http://localhost:8083
    var localhostPaht = curWwwPath.substring(0, pos);
    //获取带"/"的项目名，如：/uimcardprj
    var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
    return (localhostPaht + projectName);
}


//点击label文字时也改变复选框和的状态父元素li标签的css
(function(){

    $("label").on("click",function(event){
        //$(event.target).siblings("input")获取兄弟元素input
        var brother = $(event.target).siblings("input")
        //其父元素是li标签
        var parent = $(event.target).parent()
        if(brother.prop("checked")){
            //如果已经选择
            brother.prop({"checked":false})
            parent.removeClass("bg-primary")
            //从checkedlist中移除
            let index = checkedlist.indexOf(brother.val())
            checkedlist.splice(index,1)

        }else{
            //如果还未选择
            brother.prop({"checked":true})
            parent.addClass("bg-primary")
            //添加到checkedlist中
            checkedlist.push(brother.val())
        }
        //阻止冒泡事件，防止触发li的click事件而导致下拉框收起
        event.stopPropagation();
        console.log(checkedlist)
        
    })
})();